<template>
<div class="six-hour">
  <div class="time-banner">
    <div class="time-title">
      <div class="yesterday">昨天</div>
      <div class="time-quantum">时间段</div>
      <div class="today">今天</div>
    </div>
  </div>
  <div class="time-bg"></div>
  <div class="time-table">
    <div class="item-tab">
      <span class="tab" @click="tabClick($index)" v-for="(tab, $index) in tabList" :key="$index" 
        :class="{'selected-tab': $index === tabActive}" >
        {{tab.time}}
      </span>
    </div>
    <div class="time-table-card">
      <div class="table-card-in">
        <div class="th">
          <div class="th-img"></div>
        </div>
      <div v-for="(item, index) in timeList" :key="index">
        <div class="tr">
          <img :src="tops[index]" v-if="index === 0 || index === 1 || index === 2 "/>

          <span v-else>{{index + 1}}</span>
          <span>{{item.nicheng}}</span>
          <span>{{item.zhid}}</span>
          <span>{{item.haidou}}</span>
          <span>{{item.shichang}}</span>
        </div>
      </div>
    </div>
    </div>
  </div>

  <div class="activity-description">
    <div class="banner">
      <div class="title">活动说明</div>
    </div>
    <div class="table-card">
      <div class="rule-title"></div>    
      <div class="table-card-in">
        <div class="th">
          <span>排名</span>
          <span>0-6点</span>
          <span>6-12点</span>
          <span>12-18点</span>
          <span>18-24点</span>
        </div>
        <div class="tbody">
          <div v-for="(item, index) in list" :key="index" class="tr">
          <span>{{index + 1}}</span>
          <span>{{item.lingdaoliu}}</span>
          <span>{{item.liudaoshier}}</span>
          <span>{{item.shierdaoshiba}}</span>
          <span>{{item.shibadaoershisi}}</span>
        </div>
        </div>
      </div>
    </div>
    <div class="tip">
      注：针对平台优质直播内容设立魅力榜奖励，优质直播内容
      为颜值、才艺、脱口秀等大众喜爱的直播内容<br/>
      出现以下问题即使进入排名也取消奖励:<br/>
      *在榜单时间内低于2小时直播时长<br/>
      *直播内容差，例如挂机长时间不出人，直播间内无互动<br/>
      <p style="color: #9d125f;">最终解释权为嗨够官方所有</p>
    </div>
  </div>
</div>
</template>

<script>
import { XInput, Group, XButton, Cell } from "vux";

export default {
  name: "SixHour",
  data() {
    return {
      tabActive: 0,

      tops: [
        require("../assets/six/top1.png"),
        require("../assets/six/top2.png"),
        require("../assets/six/top3.png")
      ],

      tabList: [
        { time: "0-6点", key: "1" },
        { time: "6-12点", key: "2" },
        { time: "12-18点", key: "3" },
        { time: "18-24点", key: "4" }
      ],

      timeList: [
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        },
        {
          nicheng: "一起喵喵 ",
          zhid: " 10008888 ",
          haidou: "9999.99万",
          shichang: "450分钟"
        }
      ],

      list: [
        {
          lingdaoliu: "150元",
          liudaoshier: "200元",
          shierdaoshiba: "200元",
          shibadaoershisi: "300元"
        },
        {
          lingdaoliu: "100元",
          liudaoshier: "150元",
          shierdaoshiba: "150元",
          shibadaoershisi: "200元"
        },
        {
          lingdaoliu: "50元",
          liudaoshier: "100元",
          shierdaoshiba: "100元",
          shibadaoershisi: "150元"
        },
        {
          lingdaoliu: "",
          liudaoshier: "50元",
          shierdaoshiba: "50元",
          shibadaoershisi: "100元"
        },
        {
          lingdaoliu: "",
          liudaoshier: "",
          shierdaoshiba: "50元",
          shibadaoershisi: "50元"
        },
        {
          lingdaoliu: "",
          liudaoshier: "",
          shierdaoshiba: "",
          shibadaoershisi: "50元"
        }
      ]
    };
  },
  methods: {
    tabClick($index) {
      this.tabActive = $index;
    }
  }
};
</script>

<style lang="less">
.six-hour {
  min-height: 100%;
  background-color: #390180;
  display: flex;
  flex-direction: column;
  .time-banner {
    position: relative;
    height: 225px;
    width: 100%;
    margin: 0 auto;
    background: url("../assets/six/banner.jpg") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .time-title {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .yesterday {
        background: url("../assets/six/button_n.png") no-repeat center center;
        background-size: 100% 100%;
        margin-top: 172px;
        width: 79px;
        height: 19px;
        font-size: 11px;
        color: #fff;
        text-align: center;
        line-height: 19px;
      }
      .time-quantum {
        background: url("../assets/six/time_bg.png") no-repeat center center;
        background-size: 100% 100%;
        margin: 10px 10px;
        width: 125px;
        height: 33px;
        text-align: center;
        line-height: 33px;
        color: rgba(255, 255, 255, 1);
        font-size: 15px;
      }
      .today {
        background: url("../assets/six/button_s.png") no-repeat center center;
        background-size: 100% 100%;
        margin-top: 172px;
        width: 79px;
        height: 19px;
        text-align: center;
        font-size: 11px;
        color: #fff;
        line-height: 19px;
      }
    }
  }
  .time-bg {
    position: absolute;
    background: url("../assets/six/time_kuang.png") no-repeat center center;
    background-size: 100% 100%;
    height: 44px;
    top: 200px;
    left: 7px;
    right: 7px;
  }
  .time-table {
    width: 335px;
    height: 348px;
    box-sizing: border-box;
    margin: -18px auto 0;
    border-radius: 10px;
    background-color: rgba(125, 53, 213, 1);
    text-align: center;
    position: relative;
    .item-tab {
      width: 335px;
      height: 33px;
      line-height: 33px;
      border-radius: 10px 10px 0px 0px;
      background-color: rgba(58, 23, 119, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      display: flex;

      span:nth-child(1) {
        border-top-left-radius: 10px;
      }
      span:nth-child(4) {
        border-radius: 0px 10px 0px 0px;
      }
      .tab {
        width: 25%;
        color: #ffffff;
        font-size: 0.308123rem;
      }
      .selected-tab {
        height: 33px;
        background: url("../assets/six/bg_time_s.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .time-table-card {
      margin: 0.252101rem auto;
      padding-left: 5px;
      border-radius: 10px;
      background-color: rgba(125, 53, 213, 1);
      border: 1px solid rgba(255, 255, 255, 0);
      position: relative;
      .table-card-in {
        width: 320px;
        height: 291px;
        border-radius: 10px;
        background-color: rgba(106, 26, 193, 1);
        border: 1px solid rgba(255, 255, 255, 0);
        .th {
          height: 30px;
          line-height: 30px;
          padding: 0 11px;
          border-radius: 10px 10px 0px 0px;
          background-color: rgba(88, 30, 161, 1);
          border: 1px solid rgba(255, 255, 255, 0);
          display: flex;
          justify-content: center;
          align-items: center;
          .th-img {
            background: url("../assets/six/title_top.png") no-repeat center
              center;
            background-size: 100% 100%;
            width: 298px;
            height: 12px;
            background-color: rgba(88, 30, 161, 1);
          }
        }
        .tr {
          height: 23px;
          font-size: 10px;
          color: #fff;
          display: flex;
          align-items: center;
          margin: 3px 0;
          box-sizing: border-box;
          span {
            flex: 1;
            text-align: center;
          }
          span:nth-child(1) {
            color: #76bcf7;
          }
          img {
            padding: 0 25px;
            width: 13px;
            height: 19px;
          }
        }
      }
    }
  }
  .activity-description {
    .banner {
      position: relative;
      width: 213px;
      height: 87px;
      margin: 0px 110px;
      background: url("../assets/charm/title-zhuangshi.png") no-repeat center
        center;
      background-size: 100% 100%;
      .title {
        position: absolute;
        width: 125px;
        height: 33px;
        top: 11px;
        right: 2.001401rem;
        // margin: 0 auto;
        background: url("../assets/six/time_bg.png") no-repeat center center;
        background-size: 100% 100%;
        font-size: 15px;
        color: #fff;
        text-align: center;
        line-height: 33px;
      }
    }
    .title-txt {
      font-size: 11px;
      color: #fff;
      width: 210px;
      height: 20px;
      line-height: 20px;
      border-radius: 10px;
      background-color: rgba(224, 25, 150, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      margin: 6px auto 0;
    }
    .table-card {
      width: 310px;
      height: 260px;
      padding: 15px 10px;
      box-sizing: border-box;
      margin: -35px auto;
      border-radius: 10px;
      background-color: rgba(125, 53, 213, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      position: relative;
    }
    .rule-title {
      background: url("../assets/six/title_6hours.png") no-repeat center center;
      background-size: 100% 100%;
      margin-left: 9px;
      margin-bottom: 10px;
      width: 146px;
      height: 12px;
    }
    .table-card-in {
      // width: 290px;
      height: 210px;
      border-radius: 10px;
      background-color: rgba(106, 26, 193, 1);
      border: 1px solid rgba(255, 255, 255, 0);
      .th {
        width: 100%;
        height: 30px;
        border-radius: 10px 10px 0px 0px;
        background-color: rgba(88, 30, 161, 1);
        border: 1px solid rgba(255, 255, 255, 0);
        box-sizing: border-box;
      }
      .th span {
        font-size: 12px;
        color: #fff;
        line-height: 30px;
        display: inline-block;
        width: 19%;
      }
      .tbody {
        margin-top: 19px;
        .tr {
          font-size: 11px;
          color: #fff;
          display: flex;
          height: 23px;
          align-items: center;
          box-sizing: border-box;
          span {
            flex: 1;
            text-align: center;
          }
          span:nth-child(1) {
            color: #76bcf7;
          }
        }
      }
    }
  }
  .tip {
    width: 300px;
    margin: 45px auto 0;
    font-size: 12px;
    color: #b48ee1;
    line-height: 24px;
  }
}
</style>
